<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Water drops effect</title>
        <link rel="stylesheet" href="animation.css" type="text/css" />
        <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
    </head>
    <body>
        <div class="example">
        	<!--跳过动画-->
        	<div class='active'>
        		跳过动画>
        	</div>
        	<!--水纹效果-->
        	<div  class='tow'>
        			<span></span>
        			<span></span>
        			<span></span>
        			<span></span>
        			<span></span>
        			<span></span>
        	</div>    
        	<!--月亮-->
        	<div class="yue"></div>
        	<div class="left">BRAVOU</div>
        	<div class="right">米兰柏羽</div>
       </div>
 
                    
        	<script>
        	window.onload=function(){
        		
        			//基础属性
        		var Width=document.documentElement.clientWidth;
        		var Heigth=document.documentElement.clientHeight;
        		var Body=document.getElementsByClassName("example")[0];
        		Body.style.width=Width + 'px';
        		Body.style.height=Heigth + 'px';
        		//定义dom
        		var Aue=document.getElementsByClassName("yue")[0];
        		var Left=document.getElementsByClassName("left")[0];
        		var Right=document.getElementsByClassName("right")[0];
        		var aa=document.getElementsByClassName("tow")[0].getElementsByTagName('span');
        		
        			var i=0,t1;
        			//动画定时
        				Aue.style.animationName='yue';
        			
        			setTimeout(function(){
	        					t1=setInterval(function(){
		        				aa[i].style.animationName='spin';
		        				aa.length-1==i?clearInterval('t1'):i++; 
	        				},500);
        			},1400);
        			setTimeout(function(){
	        					Left.style.animationName='left';
	        					Right.style.animationName='right';
	        					Left.style.opacity='1';
	        					Right.style.opacity='1';
        			},3300);
        			setTimeout(function(){
	        				Aue.style.animationName='rotate';
	        				Aue.style.animationDuration='1s'; 
        			},4000);
        			setTimeout(function(){
	        				Href();
        			},5000);
        			 
        			
        			
        			function Href(){
        				//window.location.href='http://www.baidu.com';
        			}
        			
        			document.getElementsByClassName("active")[0].onclick=Href;
        			
        			
        		console.log(1000);
        	};
        	 
        	
        	</script>
 
     
    </body>
</html>